<script>
	// #ifndef MP-WEIXIN
	import TencentCloudChat from '@tencentcloud/chat';
	// #endif
	import setRecord from "@/common/setRecord"
	import {
		IMAGE_URL,
		IMAGE_PIC
	} from "@/config/app";
	import messageModal from "./messageModal"
	import formControl from "./formControl/index"
	import tabbar from "@/components/tabbar/index.vue";
	import {
		welcomeMessage,
		mockMessage,
		loadingMessage,
		industryMessage,
		eventSelectMessage
	} from './mock'
	import otherMessage from './mock3'
	import {
		goTo
	} from "./businessRouter"

	import chatMessageModal from "@/pages/tabbar/components/chatMessageModal.vue"
	export default {
		components: {
			formControl,
			messageModal,
			tabbar,
			chatMessageModal
		},
		computed: {
			workMessage() {
				return this.$store.state.workMessage
			}
		},
		data() {
			return {
				mobile: "",
				chatMessageModalIsShow: false,
				currentLang: "",
				isAuthentication: false,
				updateIsShow: false,
				IMAGE_URL: IMAGE_URL,
				tempRequestPath: "", //填写表单跳转前把参数提交到这个地址 记录无数据的查询
				lang: uni.getStorageSync("lang"),
				userInfo: {},
				role: "",
				messageModalIsShow: false,
				identity: {
					0: "供应商",
					1: "经销商",
					2: "货运代理公司",
					3: "采购商",
					4: "服务公司",
					5: "报关公司",
					6: "境内物流公司",
					7: "国际物流公司",
					8: "司机",
					9: "业务员",
					10: "俄罗斯个人"
				},
				identity_type: uni.getStorageSync("userInfoFull").identity_id,
				goToPage: "", //表单结束后 跳转页面
				animation: true,
				commonMessage: {}, //全局消息 包括 前三步询问 结束语等
				step1Message: "", //引导消息第1步
				step2Message: "", //引导消息第2步
				step3MessageNative: "", //引导消息第3步缓存
				step3Message: "", //引导消息第3步
				role: "供应商", //当前角色
				stepValue: ["", "", ""], //当前事件 浏览还是表单
				loadingDelay: false, //伪查询Loading时长 false为随机500~1500毫秒 给定值即给定毫秒
				messageScroll: "", //滚动置底ID
				goToForm: { //本次消息事件整理内容

				},
				// currentMessage: {}, //当前消息
				formStepFinish: true,
				message: "", //当前输入框内容
				messageList: [], //消息列表,
				formMessage: welcomeMessage, //当前角色表单模板
				formMessageList: [], //当前角色的表单消息列表
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// setRecord()
			// #endif
			this.getUserInfo();

			// console.log(mockMessage.messageTemplate[1]);
			// this.insertMessage(mockMessage.messageTemplate[1])
		},
		methods: {
			logOut() {
				const agreeApp = uni.getStorageSync("agreeApp")
				uni.clearStorage();
				uni.clearStorageSync();
				if (agreeApp) uni.setStorageSync("agreeApp", agreeApp)

				// #ifndef MP-WEIXIN
				let chat = TencentCloudChat.create({
					SDKAppID: 1400818966
				});
				let promise1 = chat.logout();
				promise1.then(function(imResponse) {
					console.log(imResponse.data); // 登出成功
				}).catch(function(imError) {
					console.warn('logout error:', imError);
				});
				// #endif


				this.$u.toast(this.$t('操作成功'))
				setTimeout(() => {
					this.$u.route({
						// url: '/pages/tabbar/startPage/language'
						url: '/pages/user/login/login',
					})
				}, 2000)
				return false
			},
			//TEST-跳转到业务页测试
			routeToBusinessPage(path, params) {
				//消息组件返回的是全量参数 业务页面需要的是指定参数 本方法用于参数预处理
				//确保不污染业务页面代码
				goTo(path, params);
			},
			//获取全局类消息列表例：欢迎语
			async getCommonMessage() {
				const res = await this.$u.api.ai.getCommonMessage({
					identity_type: this.userInfo.identity_type,
					user_id:this.userInfo.user_id,
				});
				if (res && res[0]) {
					this.commonMessage = res;
					const step1Message = res.find(message => message.field === "type");
					if (step1Message) this.step1Message = step1Message.list.messageTemplate;
					console.log(this.step1Message)

					const step2Message = res.find(message => message.field === "status");
					if (step2Message) this.step2Message = step2Message.list.messageTemplate;

					const step3Message = res.find(message => message.field === "template");
					if (step3Message) this.step3Message = step3Message.list
						.messageTemplate; //后面的逻辑会筛选里面的数组 每次都从下面这个缓存取
					if (step3Message) this.step3MessageNative = JSON.parse(JSON.stringify(step3Message.list
						.messageTemplate)); //缓存
					this.start();
				} else {
					// this.log(welcomeMessage.list.messageTemplate);
					// this.insertMessage(welcomeMessage.list.messageTemplate)
				}
			},
			login() {
				uni.navigateTo({
					url: "/pages/user/login/login"
				})
			},
			start() {
				this.messageList = [];
				this.goToForm = {};
				this.insertMessage(this.step1Message)
				this.formStepFinish = false;
			},
			//发送按钮
			submit() {
				this.say(this.message);
				const leftMessage = this.messageList.filter(item => !item.me)
				const leftLastMessage = leftMessage[leftMessage.length - 1];
				this.goToForm[leftLastMessage.messageAttr.eventKey] = this.message;
				this.findNext(leftLastMessage.id)
				this.message = "";
			},
			//插入消息
			insertMessage(messageItem) {
				if (!messageItem) {
					uni.showToast({
						title: "消息异常",
						icon: "none"
					})
					return
				}
				console.log(messageItem)
				if (!messageItem.me && this.animation) {
					this.insertAnimation(this.messageList.length, messageItem);
				} else {
					messageItem.questionShow = true;
					messageItem.componentShow = true;
				}
				this.messageList.push(messageItem)
				this.messageScrollToBottom()
			},
			insertAnimation(itemIndex, messageItem) {
				const textArr = messageItem.messageContent.match(/(<[^>]*>)|([^<]+)/g)
				messageItem.messageContent = ""
				const setNewText = (arr, index) => {
					messageItem.messageContent += textArr[index];
					if (textArr[index + 1]) {
						setTimeout(() => {
							setNewText(arr, index + 1)
						}, 100)
					} else {
						messageItem.questionShow = true;
						messageItem.componentShow = true;
						this.messageScrollToBottom()
					}
				}
				setNewText(textArr, 0);
			},
			//处理消息中表单组件异步加载
			//TODO: 改成动态获取码表
			setServerComponentData(needRequestList) {
				needRequestList.filter(item => item.messageAttr.request).forEach(message => {
					message.loading = true;
					//模拟获取码表
					setTimeout(() => {
						message.messageAttr.eventData = [1, 2, 3];
						message.loading = false;
					}, 1000)
				})
			},
			//本人消息由选择或输入触发
			say(messageContent) {
				this.insertMessage({
					me: true,
					messageContent
				})
				this.messageScrollToBottom();
			},
			go(path) {
				setTimeout(() => {
					this.formStepFinish = true;
				}, 500)
				const params = Object.assign({}, this.formMessage.extra, this.goToForm);
				this.routeToBusinessPage(path || this.goToPage, params);
				this.messageScrollToBottom()
			},
			//选项点击事件(消息类型eventType=eventSelect)
			answerClick(messageItem, answerItem) {
				//本质上没查询 只是当前角色允不允许 走当前表单流程
				//最终结果有效跳转
				if (messageItem.messageAttr.eventType === 'go') {
					//有效的从根属性获取跳转path

					const parsedParams = {};
					for (let key in this.goToForm) {
						//判断当前组件类型
						//普通选择器
						if (this.goToForm[key].id) {
							parsedParams[key] = this.goToForm[key].id
						}
						//城市选择
						if (this.goToForm[key].citySelect3) {
							parsedParams[key] = this.goToForm[key].citySelect3.label
						}
					}
					uni.request({
						url: this.tempRequestPath,
						method: "get",
						data: parsedParams,
						success: res => {
							// this.log(res)
						}
					})
					return this.go()
				}
				//最终结果失败跳转
				if (messageItem.messageAttr.eventType === 'goTo') {
					//失败的跳转 从当前点击的Item中跳转
					return this.go(answerItem.path)
				}

				//聊天前三步 选择发布/竞标 选择浏览/发布 选择行业
				if (messageItem.messageAttr.eventKey.indexOf("step") > -1) {
					this.eventFirst = answerItem.text;
					this.say(`${answerItem.text}`)
					if (messageItem.messageAttr.eventKey === 'step1') {
						//跳转到信息库
						if (answerItem.id == 3) {
							uni.navigateTo({
								url: "/pages/user/repository/repository?type=1"
							})
							return
						}



						// type：0    【type=0，status=1 】  浏览推广
						// type：1    【type=1，status=1 】  浏览竞标
						// type：2    【type in (0，1)  , status =0 】  发布一切

						if (answerItem.id == 0) {
							this.stepValue[0] = 0; //type
							this.stepValue[1] = 1; //  status
						} else if (answerItem.id == 1) {
							this.stepValue[0] = 1; //type
							this.stepValue[1] = 1; //  status
						} else if (answerItem.id == 2) {
							this.stepValue[0] = 1;
							this.stepValue[1] = 0;
						}
						// 确定行为 处理 事件列表
						//type 0推广 1竞标
						//status 1浏览 0发布
						if (this.stepValue[1] == 1) {
							this.step3Message.messageAttr.eventData = this.step3MessageNative.messageAttr.eventData.filter(
									eventItem => eventItem.type == this.stepValue[0])
								.filter(
									eventItem => eventItem.status == this.stepValue[1])
							this.step3Message.messageAttr.eventData_ru = this.step3MessageNative.messageAttr.eventData_ru
								.filter(
									eventItem => eventItem.type == this.stepValue[0])
								.filter(
									eventItem => eventItem.status == this.stepValue[1])
						} else {
							// this.log("发布")
							this.step3Message.messageAttr.eventData = this.step3MessageNative.messageAttr.eventData.filter(
								eventItem => eventItem.status == 0)

							this.step3Message.messageAttr.eventData_ru = this.step3MessageNative.messageAttr.eventData_ru
								.filter(
									eventItem => eventItem.status == 0)

						}

						const step2Answer = [
							// 查询信息招呼语修正：
							{
								content: "选择您要查看的信息",
								content_ru: "Хотите выбрать просмотр информации?"
							},
							// 寻找信息招呼语修正：
							{
								content: "选择您要寻找的信息",
								content_ru: "Хотите выбрать поиск информации?"
							},
							// 发布信息招呼语修正：
							{
								content: "选择您要发布的信息",
								content_ru: "Хоитите выбрать публикацию информации?"
							}
						]

						this.step3Message.messageContent = step2Answer[answerItem.id].content
						this.step3Message.messageContent_ru = step2Answer[answerItem.id].content_ru


						this.insertMessage(JSON.parse(JSON.stringify(this.step3Message)))
					} else if (messageItem.messageAttr.eventKey === 'step3') {
						uni.navigateTo({
							url: answerItem.path
						})
						this.formStepFinish = true;
						return;
						// TODO:记录请求链接
						this.tempRequestPath = answerItem.request_url
						this.stepValue[2] = answerItem.id
						this.goToPage = answerItem.path

						//请求具体的表单消息列表
						this.getFormMessageList();

					}

					return
				}


				//记录当前选择至表单
				this.goToForm[messageItem.messageAttr.eventKey] = answerItem;
				//模拟当前用户输入
				this.say(`${answerItem.text}`)
				//找到表单模板中下一条消息
				this.findNext(messageItem.id)
			},
			//下一个消息
			findNext(id) {
				const nextMessage = this.formMessageList.filter(item => item.id > id)[0];
				if (nextMessage) {
					//如果是最后一步 模拟等待
					if (nextMessage.messageAttr.eventType === 'goTo') {
						this.insertMessage(loadingMessage)

						//伪loading后添加goTo节点
						setTimeout(() => {
							this.insertMessage(nextMessage)

						}, this.loadingDelay || (500 + Math.random() * 1000))
					} else {
						this.insertMessage(nextMessage)

					}
				}
			},
			/**
			 * @method 查询表单模板
			 */
			//查询当用户角色/事件/行为/行业并插入第一条消息
			async getFormMessageList() {
				this.insertMessage(loadingMessage)
				const res = await this.$u.api.ai.getFormTemplate({
					id: this.stepValue[2]
				});




				if (res && res.messageTemplate[0]) {
					this.formMessage = res;
					this.formMessageList = res.messageTemplate.sort((a, b) => a.id - b.id);
					//暂定-发布直接跳转
					if (this.stepValue[1] == "0") {
						this.findNext(this.formMessageList[this.formMessageList.length - 2].id)
						return;
					}

					if (this.formMessageList && this.formMessageList.length > 0) {
						this.findNext(-1)
					} else {
						this.notFound();
					}
				}

			},

			//未找到匹配消息
			notFound(e = "") {
				this.insertMessage({
					messageContent: "未找到匹配的模板或前端系统错误<br/>" + e
				})
			},
			//消息置底
			messageScrollToBottom() {
				this.messageScroll = ""
				this.$nextTick(() => {
					this.messageScroll = "messageX1"
				})
			},
			//各类表单组件绑定kv
			setGoToFormKV({
				key,
				value,
				text,
				messageItem
			}) {
				this.goToForm[key] = value
				this.say(text)
				this.findNext(messageItem.id)
				// console.log(this.goToForm)
			},
			lastMessageType() {
				const leftMessage = this.messageList.filter(item => !item.me)
				const leftLastMessage = leftMessage[leftMessage.length - 1];
				if (leftLastMessage && leftLastMessage.messageAttr && leftLastMessage.messageAttr.eventType) {
					return leftLastMessage.messageAttr.eventType;
				}
			},
			finishToast() {
				uni.showToast({
					title: "请在下方点击开始新的会话",
					icon: "none"
				})
			},
			roleChange(e) {

				uni.showActionSheet({
					itemList: Object.values(this.identity),
					success: e => {
						this.identity_type = e.tapIndex;
						this.getCommonMessage()
					}
				})

			},
			async getUserInfo() {
				let user = await this.$u.api.user.getUserInfo();
				this.userInfo = user;
				this.getUserAuth2();
				this.getCommonMessage()
			},

			goOrder() {
				uni.switchTab({
					url: '/pages/tabbar/order/index'
				})
			},
			getUserAuth2() {
				this.$u.api.user.appCheck().then(res => {
					this.$u.api.user.getUserAudit().then(r => {
						uni.setStorageSync("fabu_auth", r.fabu_auth)
						if (res.authShow && r.status == '0' && this.userInfo.id) {
							this.isAuthentication = true;
						} else {
							this.isAuthentication = false;
						}
					})
				})
			},
			// 跳转至认证页面
			handeleGoAuthentication() {
				uni.navigateTo({
					url: '/pages/user/register/authentication'
				})
			},
			goIndex() {
				uni.navigateTo({
					url: '/pages/tabbar/index'
				})

			}
		},

		onShow() {
			this.mobile = uni.getStorageSync("mobile")
			this.getUserInfo();

			this.lang = uni.getStorageSync("lang")
			this.$store.commit("getMyWorkMessage")
			this.$store.commit("setTabBar", this)

			if (uni.getStorageSync("lang") !== this.currentLang && this.currentLang != "") {
				this.start();
			}

			this.currentLang = uni.getStorageSync("lang");


			//发布权限设置
			this.$u.api.user.getUserAudit().then(res => {
				uni.setStorageSync("fabu_auth", res.fabu_auth)
			})

			this.$store.commit("getC2cUnreadMsgNum")

			this.updateIsShow = false;
			setTimeout(() => {
				this.updateIsShow = true;
			}, 100)

		}

	}

	//角色->  推广/竞标->发布/浏览->什么行业
</script>
<template>
	<view class="message-container">

		<u-popup v-model="isAuthentication" mode="center" :mask-close-able="false" border-radius="16">
			<view class="index_isAuthentication">
				<view class="index_reminder">{{$t('温馨提示')}}</view>
				<scroll-view :scroll-top="0" scroll-y="true" style="height: 400rpx;width: 80%;">
					<text>{{$t('亲爱的用户： 为保证您的使用体验，获得更优质的服务质量，您需在平台内认证您的身份信息。 认证成功后，您将获得更为智能的助手服务，触发更精准的推送信息，以及专属图标展示！立即开始认证吧！')}}</text>
				</scroll-view>
				<u-button style="margin-top: 30rpx;" @click="handeleGoAuthentication">{{$t('立即认证')}}</u-button>
				<u-button style="margin-top: 30rpx;" @click="logOut">{{$t('退出登录')}}</u-button>
				<view style="width:100%;height:25px"></view>

			</view>
		</u-popup>


		<div class="chat-message-btn" @click="chatMessageModalIsShow=true">
			<div class="h1">{{$t("人工客服")}}</div>
		</div>
		<!-- 客服留言组件 -->
		<chatMessageModal :mobile="mobile" :chatMessageModalIsShow.sync="chatMessageModalIsShow" />



		<Notification />

		<!-- 		<div class="goindex" @click="goIndex">
			<image src="/static/home.png" mode="widthFix" style="width: 135rpx;"></image>
		</div> -->

		<update v-if="updateIsShow" ref="updateRef" />
		<div class="flex header-btn">
			<image :src='serverImageUrl("/static/images/chatbot/logo.png")' mode="widthFix" style="width: 131rpx;">
			</image>
			<div class="flex btn-group">
				<div class="item active" @click="goOrder">
					<image :src='serverImageUrl("/static/images/chatbot/order.png")' mode="widthFix"
						style="width: 35rpx;"></image>
					<!-- {{$t("订单")}} -->
				</div>
				<div class="item" @click="goOrder">
					<image :src='serverImageUrl("/static/images/chatbot/order2.png")' mode="widthFix"
						style="width: 42rpx;"></image>
					<!-- {{$t("竞标")}} -->
				</div>
				<div class="item" @click="messageModalIsShow=true">
					<view class="hot" v-if="workMessage.length>0"></view>
					<image :src='serverImageUrl("/static/images/chatbot/message.png")' mode="widthFix"
						style="width: 42rpx;"></image>
					<!-- {{$t("消息")}} -->
				</div>
			</div>
		</div>
		<div v-if="false"
			style="border-bottom: 1rpx solid #ddd;padding:0rpx 30rpx; background: #fff;display: flex;justify-content:space-between">
			<div>
				当前角色: <text
					style="font-size: 40rpx;font-weight: bold">{{identity_type?identity[identity_type]:"请选择模拟角色"}}</text>
			</div>
			<!-- 	<div style="display: flex;flex-wrap: wrap;">
				<div style="width: 30%;font-size: 12px;margin-right: 2%;background-color: #ddd;margin-bottom: 10px;"
					@click="" v-for="(v,key) in identity">{{v}}</div>
			</div> -->
			<div @click="roleChange" style="background: #38f;padding: 10rpx;color:#fff;border-radius: 10rpx;">更换角色</div>

			<!--<div class="route" @click='routeToBusinessPage("/pages/index/transportList/transport?type=1")'>
				模拟跳转
			</div> -->

		</div>


		<!-- 当前用户能承接的任务或订单 -->
		<messageModal :listData="workMessage" :messageModalIsShow.sync="messageModalIsShow" />

		<scroll-view scroll-y class="message-list" :scroll-into-view="messageScroll">
			<div class="message-item" :id="'message'+index" :class="{end:messageItem.me}"
				v-for="(messageItem,index) in messageList">
				<div class="flex" :style="{'flex-direction':messageItem.me?'row-reverse':''}">
					<div class="avatar" :class="{avatar2:messageItem.me}">
						<div style="width: 78rpx;height: 78rpx;border-radius: 50%;overflow: hidden;">

							<image v-if="messageItem.me" :src="IMAGE_URL+userInfo.avatar" style="width: 78rpx;"
								mode="widthFix">
							</image>
							<image v-else :src='serverImageUrl("/static/images/airobot.png")' mode="widthFix"
								style="width: 78rpx;"></image>
						</div>
					</div>
					<div class="message">
						<div class="custom-mask" @click="finishToast"
							v-if="formStepFinish&&index!=messageList.length-1">
						</div>
						<div class="text" v-if="messageItem.me" v-html="messageItem.messageContent"></div>
						<div class="text" v-else
							v-html="lang==='zh'?messageItem.messageContent:messageItem.messageContent_ru"></div>
						<!-- 常规选择 -->
						<template v-if="messageItem.messageAttr">
							<div class="question" v-if="messageItem.questionShow"
								v-html="lang==='zh'?messageItem.question:messageItem.question_ru">
							</div>
							<template
								v-if="messageItem.componentShow&&(messageItem.messageAttr.eventType==='eventSelect'||messageItem.messageAttr.eventType==='goTo'||messageItem.messageAttr.eventType==='go')">
								<div class="answer">
									<text v-if="messageItem.loading">{{$t("加载中")}}</text>
									<div v-if="lang==='zh'" class="item blue"
										@click="answerClick(messageItem,answerItem)"
										v-for="answerItem in messageItem.messageAttr.eventData"
										v-html="answerItem.text">
									</div>
									<div v-if="lang==='ru'" class="item blue"
										@click="answerClick(messageItem,answerItem)"
										v-for="answerItem in messageItem.messageAttr.eventData_ru"
										v-html="answerItem.text">
									</div>
									<!-- 	<div class="item" v-if="messageItem.messageAttr.eventType==='eventSelect'">=====
										<text style="color:#b52323">点击回复</text>
									</div> -->
								</div>
							</template>
							<div class="item"
								v-if="messageItem.messageAttr.eventType==='input'||messageItem.messageAttr.eventType==='inputNumber'">
								<text style="color:#b52323">{{$t("下方输入并发送")}}</text>
							</div>
						</template>

						<template v-if="!messageItem.me&&messageItem.messageAttr&&messageItem.messageAttr.eventType">
							<formControl v-if="messageItem.componentShow" @setGoToFormKV="setGoToFormKV"
								:messageItem="messageItem"></formControl>
						</template>

					</div>
				</div>
			</div>
			<div style="height: 100rpx;"></div>
			<div id="messageX1"></div>
		</scroll-view>

		<div style="margin-bottom: 150rpx;display: flex;align-items: center;justify-content: center;">
			<image :src='serverImageUrl("/static/newStyleIcon/bot.png")' mode="widthFix" style="width: 250rpx;"></image>
		</div>

		<div class="form-control">
			<div class="startNewChat" v-if="!userInfo.id" @click="login">{{$t("请先登录")}}</div>
			<template v-else>
				<div class="startNewChat" v-if="formStepFinish&&userInfo.id" @click="start">{{$t("开始新的会话")}}</div>
				<div class="input-group" v-if="lastMessageType()==='input'||lastMessageType()==='inputNumber'">
					<input type="text" v-model="message" class="input" :placeholder="$t('请输入内容')">
					<div class="submit" @click="submit">
						<image :src='serverImageUrl("/static/images/send.png")' style="width: 50rpx;" mode="widthFix">
						</image>
					</div>
				</div>
				<div class="tips"
					v-if="lastMessageType()!=='input'&&lastMessageType()!=='inputNumber'&&!formStepFinish">
					{{$t("请在消息上点击选择需要的内容")}}
				</div>
			</template>

		</div>
	</view>
</template>

<style lang="scss">
	.flex {
		display: flex;
	}

	.custom-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.answer {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		z-index: 9;

		.item {
			min-width: 150rpx;
			flex-shrink: 0;
			border: 1rpx solid #06C36E;
			width: 48%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 16rpx;
			box-sizing: border-box;

			&:active {
				background-color: #f5f5f5;
			}
		}

		.blue {
			color: #06C36E;

			span {
				color: #06C36E !important;
			}
		}
	}


	.question {
		margin-top: 16rpx;
	}

	.message-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		padding-top: 20rpx;
		box-sizing: border-box;
		background-image: url("https://app.gluz.com.cn/uniappAssets/static/newStyleIcon/chat.png");
		background-size: 105% 105%;
		background-position: center;
	}



	page {
		height: 100%;
		background-color: #F6F6F6;

	}

	.end {
		justify-content: flex-end !important;
		color: rgb(181, 35, 35);

		.message {
			background-color: #06C36E !important;
			color: #fff !important;
			border-radius: 16rpx 0rpx 16rpx 16rpx !important;
			word-break: break-all;
		}
	}

	/deep/ .end span {
		color: #fff !important;
		word-break: break-all;
	}

	/deep/ .end p {
		color: #fff !important;
		word-break: break-all;
	}

	/deep/ .end span {
		color: #fff !important;
		word-break: break-all;
	}

	.message-list {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;
		overflow: auto;
		padding-bottom: 0;
	}

	.message-item {
		display: flex;
		margin-bottom: 40rpx;
		width: 100%;

		.message {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			max-width: 470rpx;
			position: relative;
			word-break: break-all;
			border-radius: 0rpx 16rpx 16rpx 16rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
			min-width: 360rpx;
		}

	}

	.end {
		.message {
			min-width: auto !important;
		}
	}

	.startNewChat {
		width: 690rpx;
		height: 98rpx;
		border-radius: 16rpx;
		background: #fff;
		border: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
	}

	.tips {
		width: 690rpx;
		height: 98rpx;
		border-radius: 16rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #B0B0B0;
	}

	.input-group {
		width: 690rpx;
		height: 98rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input {
			margin-left: 12rpx;
			width: 100%;
			font-size: 26rpx;
		}

		.submit {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 129rpx;
			height: 74rpx;
			border-radius: 16rpx;
			background: #06C36E;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
			padding-bottom: 10rpx;
			box-sizing: border-box;
			margin-right: 12rpx;
			margin-left: 22rpx;
		}
	}

	.form-control {
		display: flex;
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 98rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		box-sizing: border-box;
		margin-bottom: 18rpx;
		margin-top: 1rpx;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;

		.input {
			width: 100%;
			height: 100%;
		}

		.submit {
			flex-shrink: 0;
		}
	}

	.route {
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		font-size: 12px;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
	}

	.avatar {
		margin-right: 16rpx;
	}

	.avatar2 {
		margin-right: 0 !important;
		margin-left: 16rpx;
	}

	.header-btn {
		margin-top: var(--status-bar-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		// background-color: #fff;

		.btn-group {}

		.item {
			color: #3D3D3D;
			margin-left: 50rpx;
			position: relative;

			.hot {
				font-size: 22rpx;
				position: absolute;
				background-color: red;
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				right: -5rpx;
				top: -5rpx;
				z-index: 9;
			}
		}
	}

	.index_isAuthentication {
		width: 600rpx;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.index_reminder_Aut {
		width: 80%;
		height: 500rpx;
		font-size: 40rpx;
		overflow-y: scroll;
	}

	.index_reminder {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
		font-weight: 600;
	}

	.goindex {
		position: fixed;
		right: 30rpx;
		bottom: 300rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chat-message-btn {
		width: 140rpx;
		height: 160rpx;
		position: fixed;
		right: 40rpx;
		background-image: url("/static/customer.png");
		background-size: 100% 100%;
		bottom: 165rpx;
		z-index: 99;
		.h1{
			font-size: 22rpx;
			color:#fff;
			text-align: center;
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			padding-bottom: 5rpx;
			font-weight: bold;
			background-color: #6492b4;
			border-radius: 0 0 15rpx 15rpx;
		}
	}
</style>